<template>
  <div>
    <k-form ref="form" @submit="onClickSave" class="ke__padding">
      <div class="ke__padding ke__bgfff">
        <el-table :data="showList" v-loading="loading">
          <el-table-column width="65" label="删除?" align="center">
            <template slot-scope="{ row, $index }">
              <el-checkbox :value="deleteId.indexOf(row.id) > -1"
                           @change="onChangeDelete($event, $index)"/>
            </template>
          </el-table-column>

          <el-table-column label="分类名称">
            <template slot-scope="{ row }">
              <el-input v-model="row.name" @input="onInput(row, 'name', $event)"/>
            </template>
          </el-table-column>

          <el-table-column label="显示顺序" width="100">
            <template slot-scope="{ row }">
              <el-input v-model="row.sort" @input="onInput(row, 'sort', $event)"/>
            </template>
          </el-table-column>
        </el-table>

        <div class="ke__margin-top">
          <el-button type="primary" :loading="subing" native-type="submit">保存</el-button>

          <span class="ke__help ke__margin-left">任何修改都需要点击保存按钮才会生效</span>
        </div>
      </div>
    </k-form>
  </div>
</template>

<script>
  import { v4 as uuidv4 } from 'uuid'
  export default {
    name: 'NewsCategory',
    data () {
      return {
        list: [],
        inserts: [], // 需要插入的数据
        updates: [], // 需要更新的数据
        deleteId: [], // 需要删除的数据
        loading: true,
        subing: false,
      }
    },
    computed: {
      showList () {
        return this.list.concat(this.inserts)
      }
    },
    mounted () {
      this.inserts.push({
        _id: uuidv4()
      })
      this.onLoad()
    },
    methods: {
      // 加载列表数据
      onLoad () {
        this.loading = true
        this.$http.get('admin/news/category')
          .finally(() => this.loading = false)
          .then(result => {
            this.list = result.list.map((item) => {
              item.stateText = item.is_disabled ? '禁用' : '启用'
              return item
            })
          })
      },
      // 输入回调
      onInput (row, column, value) {
        if (row.id) {
          const idx = this.updates.findIndex(item => item.id === row.id)
          if (idx === -1) {
            this.updates.push({
              id: row.id,
              [column]: value
            })
          } else {
            KE.array.update(this.updates, row.id, {
              [column]: value
            })
          }
        }

        if (column === 'name' && value) {
          const idx = this.inserts.findIndex(item => item._id === row._id)
          if (idx === this.inserts.length - 1) {
            this.inserts.push({
              _id: uuidv4()
            })
          }
        }
      },
      // 删除勾选
      onChangeDelete (val, idx) {
        if (this.showList[idx].id) {
          if (val) {
            this.deleteId.push(this.showList[idx].id)
          } else {
            this.deleteId.splice(this.deleteId.indexOf(this.showList[idx].id), 1)
          }
        } else {
          KE.array.update(this.inserts, this.showList[idx]._id, {
            _delete: val
          }, '_id')
        }
      },
      // 提交保存
      onClickSave () {
        let form = {
          inserts: this.inserts.filter((item) => {
            return !item._delete && item.name
          }),
          updates: this.updates,
          deletes: this.deleteId
        }
        if (form.inserts.length === 0 && form.updates.length === 0 && form.deletes.length === 0) {
          this.$message.error('没有更改,无需更新')
          return
        }
        this.subing = true
        this.$http.post('admin/news/category/save', form)
          .finally(() => this.subing = false)
          .then((result) => {
            if (result.res_code === 0) {
              this.$message.success('保存成功')
              this.inserts = [{
                _id: KE.timestamp()
              }]
              this.updates = []
              this.deleteId = []
              console.log(this.deleteId)
              this.onLoad()
            } else {
              this.$message.error(result.res_msg)
            }
          })
      }
    }
  }
</script>

<style scoped>

</style>
